<template>
  <div class="orderMenu" v-if="shopInfo">
    <!-- 商家推荐 -->
    <div class="shop-commend" v-for="(items,index) in shopInfo.recommend" :key="index">
      <h2>{{ items.name }}</h2>
      <ul>
        <li v-for="(item,indey) in items.items" :key="indey">
          <div class="shop-img">
            <img :src="item.image_path" alt="">
          </div>
          <p class="shop-name">{{ item.name }}</p>
          <p class="sale-number">
            <span>月售{{ item.month_sales }}</span>
            <span>好评率{{ item.satisfy_rate }}</span>
          </p>
          <div class="price">
            <span>￥{{item.activity.fixed_price}}</span>
            <count :data="item" />
          </div>
        </li>
      </ul>
    </div>
    <div class="food-wrap">
      <!-- 左侧菜单栏 -->
      <div class="menu" ref="menuScroll">
        <ul class="menu-item">
          <li v-for="(item,index) in shopInfo.menu" :key="index" @click="menuClick(index)" :class="{current: JudgeCurrentIndex===index }">
            <img :src="item.icon_url" alt="" v-if="item.icon_url">
            <span>{{item.name}}</span>
          </li>
        </ul>

      </div>
      <!-- 右侧商品内容 -->
      <div class="food-main" ref="foodScroll">
        <ul>
          <li v-for="(items,index) in shopInfo.menu" :key="index" class="food-list">
            <!-- 上方介绍部分 -->
            <div class="food-describ">
              <strong>{{items.name}}</strong>
              <span>{{items.description}}</span>
            </div>
            <!-- 下方商品部分 -->
            <div class="food-item" v-for="(item,indey) in items.foods" :key="indey" @click="watchDetail(item)">
              <!-- 左边图片 -->
              <img :src="item.image_path" alt="">
              <!-- 右边 -->
              <div class="food-intro">
                <div class="title">{{item.name}}</div>
                <span class="brief">{{item.description}}</span>
                <!-- 评价 -->
                <div class="evaluation">
                  <span>月售{{item.month_sales}}份</span>
                  <span>好评率{{item.satisfy_rate}}%</span>
                </div>
                <div class="price">
                  <span>￥{{item.activity.fixed_price}}</span>
                  <count :data="item" />
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>

    </div>
    <!-- 购物车 -->
    <shop-cart :data="shopInfo" />

    <!-- 商品详情 -->
    <food :isShow="isShow" :food="food" @close="isShow=false" />
  </div>
</template>

<script>
import Count from './Count'
import BScroll from 'better-scroll'
import ShopCart from '@/components/ShopCart'
import Food from '@/views/DetailShop/Food'

export default {
  name: 'OrderMenu',
  created() {
    this.getData()
  },
  mounted() {
  },
  data() {
    return {
      shopInfo: null,
      menuScroll: null,
      foodScroll: null,
      // 右侧滚动的的高度
      scrollY: null,
      // currentIndex: 0,
      // 右边食物所有的高度
      scrollList: [],
      // 食物详情页数据
      food: null,
      // 控制食物详情页的显示与隐藏
      isShow: false
    }
  },
  computed: {
    // 根据右侧滚动位置  判断左侧 列表的活跃状态
    JudgeCurrentIndex() {
      for (let i = 0; i < this.scrollList.length - 1; i++) {
        const height1 = this.scrollList[i]
        const height2 = this.scrollList[i + 1]
        if (this.scrollY >= height1 && this.scrollY < height2) {
          return i
        }
      }
      return 0
    }
  },
  methods: {
    getData() {
      this.$http('/api/profile/batch_shop').then(res => {
        res.data.recommend.forEach(item => {
          item.items.forEach(current => {
            current.count = 0
          })
        })
        res.data.menu.forEach(items => {
          items.foods.forEach(item => {
            item.count = 0
          })
        })
        this.shopInfo = res.data

        this.$nextTick(() => {
          this.initScroll()

          this.currentScroll()
        })
      })
    },
    initScroll() {
      this.menuScroll = new BScroll(this.$refs.menuScroll, {
        click: true
      })

      this.foodScroll = new BScroll(this.$refs.foodScroll, {
        click: true,
        probeType: 3
      })
      this.foodScroll.on('scroll', position => {
        this.scrollY = Math.abs(Math.round(position.y))
      })
    },
    // 点击左侧菜单栏触发
    menuClick(index) {
      // this.currentIndex = index
      // 匹配到右边12个区
      const foodList = this.$refs.foodScroll.getElementsByClassName('food-list')

      const el = foodList[index]
      this.foodScroll.scrollToElement(el, 250)
    },
    currentScroll() {
      // 匹配到右边12个区
      const foodList = this.$refs.foodScroll.getElementsByClassName('food-list')

      let height = 0
      this.scrollList.push(height)
      for (let i = 0; i < foodList.length - 1; i++) {
        const item = foodList[i]

        height += item.clientHeight
        this.scrollList.push(height)
      }
    },
    watchDetail(items) {
      this.food = items
      this.isShow = true
    }
  },
  components: {
    Count,
    ShopCart,
    Food
  }
}
</script>

<style lang="less" scoped>
.orderMenu {
  position: relative;
  height: calc(100% - 40px);
  background-color: #fff;
  .shop-commend {
    overflow-x: scroll;
    h2 {
      font-size: 16px;
      padding: 10px;
    }
    ul {
      display: flex;
      li {
        padding: 0 10px;
        .shop-img {
          width: 140px;
          height: 140px;
          img {
            width: 100%;
          }
        }
        p {
          margin: 0;
        }
        .shop-name {
          font-size: 14px;
          font-weight: 700;
        }
        .sale-number {
          font-size: 12px;
          color: #666;
          margin: 8px 0;
          span {
            margin-right: 8px;
          }
        }
        .price {
          font-size: 14px;
          color: red;
          font-weight: 600;
          display: flex;
          justify-content: space-between;
        }
      }
    }
  }
  .food-wrap {
    display: flex;
    height: calc(100% - 40px);
    // 左侧菜单栏
    background-color: #f1f1f1;
    padding-bottom: 48px;
    .menu {
      width: 80px;
      overflow-y: hidden;
      height: calc(100% - 100px);
      .menu-item {
        li {
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 20px 5px;
          flex: 1;
          font-size: 14px;
          line-height: 1.2;
          &.current {
            background-color: #fff;
          }
          img {
            width: 20px;
            margin-right: 3px;
          }
          span {
            text-align: center;
          }
        }
      }
    }

    // 右侧
    .food-main {
      flex: 1;
      background-color: #fff;
      overflow-y: hidden;
      ul {
        padding-bottom: 20px;
        li {
          padding: 20px 15px;
          box-sizing: border-box;
          .food-describ {
            strong {
              margin-right: 8px;
            }
            span {
              color: #666;
            }
          }
          .food-item {
            display: flex;
            margin-bottom: 15px;
            img {
              height: 120px;
            }
            .food-intro {
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              .title {
                font-size: 18px;
                font-weight: 700;
              }
              .brief {
                display: inline-block;
                width: 150px;
                color: #666;
                margin-top: 8px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
              }
              .evaluation {
                span {
                  font-size: 14px;
                  color: #666;
                  &:first-child {
                    margin-right: 8px;
                  }
                }
              }
              .price {
                display: flex;
                justify-content: space-between;
                color: red;
                font-weight: 700;
              }
            }
          }
        }
      }
    }
  }
}
::-webkit-scrollbar {
  width: 0 !important;
}
</style>
